<template>
<el-dialog
  title="预览"
  v-model="state.dialogVisible"
  width="15%"
  :before-close="handleClose">
 <el-image
    style="width: 100%;"
    :src="state.url"
    :preview-src-list="state.srcList">
  </el-image>
  <template #footer>
    <span class="dialog-footer">
      <el-button type="primary" @click="close">关闭</el-button>
    </span>
  </template>
</el-dialog>
 
</template>

<script>
import {watch, getCurrentInstance, watchEffect ,reactive} from 'vue';
export default {
  components: {},
  props: {
      url:{
          type:String
      },
      srcList:{
          type:Array
      },
      show_window:{
          type:Boolean
      }
  },
 setup(props,{emit}){
     console.log("预览组件",props);
     const {ctx}  =getCurrentInstance();
     let state=reactive({
         srcList:props.srcList,
         url:'',
         dialogVisible:false,
         imghost:''
     });
    watch(() => props.url, (oldVlaue, newValue) => {
      console.log(oldVlaue, newValue, '改变')
      console.log(props.show_window)
        state.dialogVisible=true;
        state.url=ctx.$http.IMG_HOST+props.url
        console.log(ctx.$http.IMG_HOST+props.url)
    })
     
     function close(){
         state.dialogVisible = false;
         state.url='';
     }
     return {
         state,
         close
     }
 }
};
</script>
<style lang="scss" scoped>
el-image{
    width: 100%;
}
</style>